<template>
  <div class="g-cur" style="padding-top: 60px;">
    <div class="wp">
      <NuxtLink to="/" class="a">创作中心</NuxtLink><span> / </span>
      <span class="s">创建作品</span>
    </div>
  </div>
  <div class="wp">
    <div class="createW">
      <!-- tab -->
      <ul class="ul-steps">
        <li class="act">
          <div class="idx">1</div>
          <div class="p">书籍信息</div>
        </li>
        <li class="act">
          <div class="idx">2</div>
          <div class="p">版权信息</div>
        </li>
        <li >
          <div class="idx">3</div>
          <div class="p">打印信息</div>
        </li>
        <li >
          <div class="idx">4</div>
          <div class="p">价格信息</div>
        </li>
      </ul>
      <!-- 内容 -->
      <div class="m-bookInfol">
        <div class="m-forml1 styl2">
          <a-form >
            <div class="item">
              <a-form-item
                label="授权方式"
                class="keynote"
              >
                <div class="m-radiol">
                  <a-radio-group v-model:value="formState.license">
                  <a-radio value="STANDARD_COPYRIGHT" name="type">标准版权许可证 <em>（注：版权所有许可，未经您明确同意，不得分发、重新混合或以其他方式使用您的作品）</em></a-radio>
                  <a-radio value="CREATIVE_COMMONS" name="type">独家版权许可</a-radio>
                  <a-radio value="PUBLIC_DOMAIN" name="type">公共版权</a-radio>
                </a-radio-group>
                </div>
              </a-form-item>
            </div>
            <div class="item">
              <a-form-item
                label="版权所有者"
                class="keynote"
              >
                <a-input v-model:value="formState.holderName" class="inp" placeholder="请输入版权所有者名称" />
              </a-form-item>
            </div>
            <div class="item">
              <a-form-item
                label="版权年份"
                class="keynote"
              >
                <a-input v-model:value="formState.copyrightYear" class="inp" placeholder="请输入版权年份" />
              </a-form-item>
            </div>
            <div class="item">
              <a-form-item
                label="ISBN"
                class="keynote"
              >
                <div class="m-radiol styl2">
                  <a-radio-group v-model:value="formState.isbn.isFreeIsbn">
                    <a-radio :value="true" name="type">获取免费ISBN</a-radio>
                    <a-radio :value="false" name="type">我有自己的ISBN</a-radio>
                  </a-radio-group>
                </div>
              </a-form-item>
            </div>
            <div class="item">
              <a-form-item
                label="ISBN"
              >
              <div class="isbn">
                        <a-input
                          v-model:value="formState.isbn.isbnNum"
                          :readonly="formState.isbn.isFreeIsbn"
                          class="inp"
                        />
                        <div v-if="formState.isbn.isFreeIsbn" class="code-btn" :class="{'disabled':!flag}" @click="settime()">{{text}}</div>
                      </div>
              </a-form-item>
            </div>
            <div v-if="!formState.isbn.isFreeIsbn">
              <div class="item">
                <a-form-item
                  label="出版者/出版商"
                >
                  <a-input v-model:value="formState.isbn.publisher" class="inp" placeholder="请输入出版者/出版商信息" />
                </a-form-item>
              </div>
              <div class="item">
                <a-form-item
                  label="姓名"
                >
                  <a-input v-model:value="formState.isbn.contactName" class="inp" placeholder="请输入姓名" />
                </a-form-item>
              </div>
              <div class="item">
                <a-form-item class="it2"
                  label="国家信息"
                >
                  <div class="m-selectl">
                    <a-select
                      ref="select"
                      v-model:value="formState.isbn.contactCountry"
                      placeholder="国家信息"
                      style="width: 205px"
                    >
                      <a-select-option value="A">国家信息</a-select-option>
                      <a-select-option value="B">国家信息</a-select-option>
                      <a-select-option value="C">国家信息</a-select-option>
                    </a-select>
                  </div>
                </a-form-item>
                <a-form-item class="it2"
                  label="书籍分类"
                >
                  <div class="m-selectl">
                    <a-select
                      ref="select"
                      v-model:value="formState.isbn.contactCity"
                      placeholder="书籍分类"
                      style="width: 205px"
                    >
                    <a-select-option v-for="(item, index) in types.category" :key="index" :value="item">{{ item
                          }}</a-select-option>
                    </a-select>
                  </div>
                </a-form-item>
              </div>
              <div class="item">
                <a-form-item
                  label="详细地址"
                >
                  <a-input v-model:value="formState.isbn.contactAddress" class="inp" placeholder="请输入详细地址" />
                </a-form-item>
              </div>
              <div class="item">
                <a-form-item
                  label="邮政编码"
                >
                  <a-input v-model:value="formState.isbn.contactPostalCode" class="inp" placeholder="请输入邮政编码" />
                </a-form-item>
              </div>
              <div class="item">
                <a-form-item
                  label="联系电话"
                > 
                  <div class="tel">
                    <div class="m-selectl styl3">
                      <a-select
                        ref="select"
                        v-model:value="phoneType"
                        style="width: 83px"
                      >
                        <a-select-option value="A">+86</a-select-option>
                        <a-select-option value="B">+86</a-select-option>
                        <a-select-option value="C">+86</a-select-option>
                      </a-select>
                    </div>
                    <a-input v-model:value="formState.isbn.contactPhone" class="inp" placeholder="请输入联系电话" />
                  </div>
                </a-form-item>
              </div>
            </div>
            <div class="bot-opts">
              <NuxtLink :to="'/bookInfo?id='+id+'&from=2'" class="btn">返回上一步</NuxtLink>
              <a @click="save()" class="btn btn1">下一步</a>
            </div>
          </a-form>
        </div>
      </div>
    </div>
  </div>

</template> 

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import request from '~/services/request'
import { message } from 'ant-design-vue';
import {RouterLink, RouterView, useRouter} from 'vue-router'
const router = useRouter()
const route = useRoute()  
const id =ref(route.query.id )
const act = ref(0);
const checked = ref(false);
const phoneType=ref('A')
const formState = reactive({
  license: 'STANDARD_COPYRIGHT',
  holderName: '',
  copyrightYear: '',
  isbn: {
    isbnNum:'',
    publisher:'',
    contactName:'',
    contactAddress:'',
    contactCity:'',
    contactPostalCode:'',
    contactState:'',
    contactCountry:'',
    contactPhone:'',
    isFreeIsbn:false
  },
  id1:route.query.id
});
// 获取ISBN
const flag = ref(true);
const types = ref({});
const value1 = ref(1);
const text = ref("获取ISBN");
const settime = () => {
  var num = 121;
  request.get_isbnFree({}).then(res=>{
    formState.isbn.isbnNum=res+''
  })
  if (flag.value) {
   
    flag.value = false;
    var timer = setInterval(function () {
      num--;
      if (num <= 0) {
        clearInterval(timer);
       
        text.value = "重新发送";
        flag.value = true;
      } else {
        
        text.value =  num + "s";
      }
    },
      1000)
  } else {
    return false;
  }
}
function save(){
  if(formState.id2){
    delete formState.isbn.id
    delete formState.isbn.createdAt
    delete formState.isbn.updatedAt
    delete formState.isbn.copyrightId
    request.patch_books_id_copyright(formState).then(res=>{

router.push('/printInfo?id='+id.value+'&from=2');
})
  }else{
    request.post_books_id_copyright(formState).then(res=>{

router.push('/printInfo?id='+id.value+'&from=2');
})
  }
}
// 上传图片
function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
const fileList1 = ref([{
  uid: '-1',
  name: 'image.png',
  status: 'done',
  url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},]);
const handleCancel = () => {
  previewVisible.value = false;
  previewTitle.value = '';
};
const handlePreview = async file => {
  if (!file.url && !file.preview) {
    file.preview = await getBase64(file.originFileObj);
  }
  previewImage.value = file.url || file.preview;
  previewVisible.value = true;
  previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};

// 弹窗
const visible1 = ref(true);
const visible2 = ref(true);
onMounted(()=>{
    request.get_books_by_id({ id: id.value }).then(res => {
      if(res.copyright){
        for (const key in formState) {
          if (Object.hasOwnProperty.call(formState, key)) {
            if(key!='id1'){
              formState[key] = res.copyright[key];
            }
          }
        }
        formState.id2=res.copyright.id
      }
    })
  request.api_config({ id: 'all' }).then(res => {
    types.value = res
  })
})
</script>

<style>
</style>